//1.设置基地址
axios.defaults.baseURL = 'http://ajax-base-api-t.itheima.net';

//获取元素
const tb = document.querySelector('#tb');
const form = document.querySelector('#bookForm');
const search = document.querySelector('#btnSearch');

// //测试
// axios.get('/api/getbooks').then(({ data: res }) => console.log(res))

//封装一个渲染函数
const renderBooks = () => {
  //发起请求，请求渲染的数据
  axios.get('/api/getbooks').then(({ data: res }) => {
    const { data } = res;

    const html = data
      .map((item) => {
        return `<tr>
           <td>${item.id}</td>
           <td>${item.bookname}</td>
           <td>${item.author}</td>
           <td>${item.publisher}</td>
           <td><a href="#" data-id="${item.id}">删除</a></td>
         </tr>`;
      })
      .join('');

    //渲染真实dom
    tb.innerHTML = html;
  });
};

//页面加载，调用渲染函数渲染页面
renderBooks();

form.addEventListener('click', function (e) {
  //阻止默认提交事件
  e.preventDefault();

  if ((e.target.tagName = 'BUTTON')) {
    if (e.target.dataset.name === 'add') {
      //使用serialize插件获取表单数据
      const data = serialize(form, { hash: true });
      console.log(data);

      //发起添加请求
      axios.post('/api/addbook', data).then(({ data: res }) => {
        console.log(res);
        alert(res.msg);

        if (res.status !== 201) return;

        this.reset();

        //成功添加之后重新渲染页面
        renderBooks();
      });
    } else if (e.target.dataset.name === 'search') {
      //查询
      const data = serialize(form, { hash: true });
      console.log(data);
      if (Object.values(data).length === 0) {
        alert('输入不能为空');
        return;
      } else if (
        (Object.values(data).length > 0) &
        (Object.values(data).length < 3)
      ) {
        alert('要想准确的查找图书,请提供更多的图书信息');
      }

      axios.get('/api/getbooks', { params: data }).then(({ data: res }) => {
        // alert(res.msg)

        // if (res.status !== 201) return

        // this.reset()
        const { data } = res;
        const html = data
          .map((item) => {
            return `<tr>
                 <td>${item.id}</td>
                 <td>${item.bookname}</td>
                 <td>${item.author}</td>
                 <td>${item.publisher}</td>
                 <td><a href="#" data-id="${item.id}">删除</a></td>
               </tr>`;
          })
          .join('');
        tb.innerHTML = html;
      });
    }
  }
});

//删除事件
tb.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    //获取自定义属性id
    let id = e.target.dataset.id;

    //发起删除请求
    axios.get('/api/delbook?id=' + id).then(({ data: res }) => {
      //删除完以后重新渲染
      renderBooks();
    });
  }
});
